<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <!-- 引用面包屑导航组件 -->
      <breadcrumb>粉丝管理</breadcrumb>
    </div>
    <el-tabs v-model="activeName" type="card" @tab-click="hTabChange">
      <el-tab-pane label="粉丝列表" name="fans">
        <div class="fans_list">
          <div class="fans_item" v-for="fans in fansData" :key="fans.id.toString()">
            <el-avatar :size="80" :src="fans.photo"></el-avatar>
            <p>{{fans.name}}</p>
            <el-button type="primary" plain size="small">+关注</el-button>
          </div>
        </div>
         <!-- 分页部分 -->
        <el-pagination
        :disabled="isloading"
          background
          layout="prev, pager, next"
          :total="totalCount"
          @current-change="hChangePage"
          ></el-pagination>
      </el-tab-pane>
      <el-tab-pane label="粉丝画像" name="echarts">
         <div>画像-echarts</div>
          <!-- 下面的dom用来充当echarts画图的容器
            注意： 一定要有宽，高
          -->
          <div id="main" ref='refDiv' style="width: 600px;height:400px;"></div>
      </el-tab-pane>
    </el-tabs>
  </el-card>
</template>

<script>
// 引入echarts
import echarts from 'echarts'
export default {
  name: 'fans',
  data () {
    return {
      isloading: false,
      activeName: 'fans',
      totalCount: 0,
      curPage: 1,
      fansData: []
    }
  },
  created () {
    this.loadFans()
  },
  methods: {
    async loadFans () {
      try {
        const res = await this.$http({
          method: 'GET',
          url: '/mp/v1_0/followers',
          params: {
            page: this.curPage
            // per_page: 10
          }
        })
        console.log('粉丝数据', res)
        this.fansData = res.data.data.results
        this.totalCount = res.data.data.total_count
      } catch (err) {
        console.log(err)
      }
    },
    // 点击tab栏切换
    hTabChange (tab) {
      // console.log('切换后的tab值', tab)
      if (tab.name === 'echarts') {
        this.doDrow()
      }
    },
    // 对请求回的数据进行加工
    getAgeObj (ageObj) {
      const xAxis = Object.keys(ageObj).map(item => {
        return item.replace('le', '小于').replace('gt', '大于')
      })
      const data = Object.values(ageObj)
      return { xAxis, data }
    },
    async doDrow () {
      // 使用echarts的步骤
      // 1.初始化图像
      const mycharts = echarts.init(this.$refs.refDiv)
      // 2.发送请求,获取粉丝统计数据
      try {
        const res = await this.$http({
          method: 'GET',
          url: '/mp/v1_0/statistics/followers'
        })
        console.log('粉丝统计数据', res)
        // 加工之后的数据
        const result = this.getAgeObj(res.data.data.age)
        console.log('result', result)
        // 2.设置配置项
        const option = {
          tooltip: {},
          legend: {
            data: ['人数']
          },
          xAxis: {
            data: result.xAxis
          },
          yAxis: {
          },
          series: [{
            name: '人数',
            data: result.data,
            type: 'line'
          }]
        }
        // 3.生成图表
        mycharts.setOption(option)
      } catch (err) {
        this.$message.error('更新失败')
      }
    },
    // 切换页面
    hChangePage (CurPage) {
      // 1.更新当前页面
      // alert(CurPage)
      this.curPage = CurPage
      // 2.重新发送请求，渲染页面
      this.loadFans()
    }
  }
}
</script>
<style scoped lang='less'>
.fans_list {
  .fans_item {
    width: 120px;
    height: 170px;
    border: 1px dashed #ddd;
    text-align: center;
    padding-top: 10px;
    display: inline-block;
    margin-right: 30px;
    margin-bottom: 30px;
    p {
      margin: 10px 0;
    }
  }
}
</style>>
